<html>
<head profile="http://www.w3.org/2002/12/namespace">
<link rel="stylesheet" type="text/css" href="../../../../dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css" href="../../../../dijit/themes/tundra/tundra.css">
<title>GFX Layer. Random Stars on a Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="user-scalable=no, width=device-width" />

<!-- hosted version -->
<script type="text/javascript" src="http://openlayers.org/api/2/OpenLayers.js"></script>

<script type="text/javascript">
	var djConfig = {
		parseOnLoad : true
	};
</script>

<script type="text/javascript" src="../../../../dojo/dojo.js"></script>

<script type="text/javascript">
	require([	"dojo/ready",
						"dojo/_base/lang",
						"dojo/_base/array",
						"dojo/_base/Color",
						"dojox/geo/openlayers/widget/Map",
						"dojox/geo/openlayers/GfxLayer",
						"dojox/geo/openlayers/LineString",
						"dojox/geo/openlayers/GeometryFeature",
						"dojox/gfx",
						"dojox/gfx/move",
						"dojox/gfx/fx",
						"dojo/fx",
						"dojo/colors",
						"dojo/parser"], function(ready, lang, arr, Color, Map, GfxLayer, LineString, GeometryFeature, gfx, move, fx, colors){

		ready(function(){
			var map = dijit.byId("map");
			var layer = new GfxLayer("Stars Layer");
			map.map.addLayer(layer);
			var b = layer.olLayer.getExtent();

			var p1 = {
				x : b.left,
				y : b.top
			};
			var proj = map.map.olMap.getProjectionObject();
			p1 = map.map.transform(p1, proj, dojox.geo.openlayers.EPSG4326);
			p1 = lang.mixin({}, p1);

			var p2 = {
				x : b.right,
				y : b.bottom
			};
			p2 = map.map.transform(p2, proj, dojox.geo.openlayers.EPSG4326);
			p2 = lang.mixin({}, p2);

			var numPoints = 100;
			var precision = 10;
			for ( var i = 0; i < numPoints; i++) {
				var dx = p2.x - p1.x;
				var x = Math.random() * dx + p1.x;
				var dy = p2.y - p1.y;
				var y = Math.random() * dy + p1.y;
				var pg = new dojox.geo.openlayers.Point({
					x : x.toFixed(precision),
					y : y.toFixed(precision)
				});

				var pf = new GeometryFeature(pg);
				pf.createShape = function(/* Surface */s){
					var status = null;
					function createText(surface, x, y, text){
						var t = surface.createText({});
						t.moveToFront().setFill(new Color([0, 0, 0, 1])).setFont({
							family : "serif",
							//      variant : "small-caps",
							weight : "normal",
							size : "20pt"
						}).setShape({
							x : x,
							y : y,
							text : text,
							align : "start"
						});
						t.setFill("red");
						t.setStroke({
							color : [0, 0, 0, 0],
							weight : 0.5
						});
						var anim = dojox.gfx.fx.animateFill({
							shape : t,
							duration : 2000,
							color : {
								end : "transparent"
							}
						});
						dojo.connect(anim, "onEnd", function(){
							t.removeShape();
						});
						anim.play();
						return t;
					}

					function showStatus(event, surface, star, text){
						var mx = event.pageX;
						var my = event.pageY;
						if (lang.isArray(text)) {
							var x = mx + 10;
							var y = my + 10;
							var dy = 30;
							status = surface.createGroup();
							arr.forEach(text, function(s){
								var t = createText(surface, x, y, s);
								y += dy;
								status.add(t);
							});
						} else {
							status = createText(surface, mx, my, text);
						}
						var anim = dojox.gfx.fx.animateFill({
							shape : status,
							duration : 3000,
							color : {
								end : "transparent"
							}
						});
						dojo.connect(anim, "onEnd", function(){
							status.removeShape();
							status = null;
						});
						anim.play();
						return status;
					}
					var r1 = Math.floor(Math.random() * 50 + 2);
					var r2 = Math.floor(Math.random() * 30 + 2);
					var branches = Math.floor(Math.random() * 10 + 2);
					var start = Math.random() * Math.PI * 2;
					var star = makeStarShape(r1, r2, branches, start);
					var path = s.createPath();
					path.setShape({
						path : star
					});
					var msg = [	"star r1:" + r1 + " r2:" + r2,
											"branches: " + branches,
											"longitude: " + x.toFixed(4),
											"latitude: " + y.toFixed(4)];
					path.connect("onmouseenter", function(event){

					});
					path.connect("onmouseout", function(event){

					});
					path.connect("onmousemove", function(event){
						if (!status)
							status = showStatus(event, s, path, msg);
					});
					return path;
				};
				var r = Math.floor(Math.random() * 255);
				var g = Math.floor(Math.random() * 255);
				var b = Math.floor(Math.random() * 255);
				var t = 1;
				var c1 = [r, g, b, t];
				pf.setStroke(c1);
				r = Math.floor(Math.random() * 255);
				g = Math.floor(Math.random() * 255);
				b = Math.floor(Math.random() * 255);
				t = Math.random() * 0.75 + 0.25;
				var c2 = [r, g, b, t];
				pf.setFill(c2);
				layer.addFeature(pf);
			}

			setTimeout(function(){
				layer.olLayer.redraw();
			}, 0);

		});

		function makeStarShape(r1, r2, b, start){
			var precision = 2;
			var TPI = Math.PI * 2;
			var di = TPI / b;
			if (!start)
				start = Math.PI;
			var s = null;
			var end = start + TPI;
			for ( var i = start; i < end; i += di) {
				var c1 = Math.cos(i);
				var s1 = Math.sin(i);
				var i2 = i + di / 2;
				var c2 = Math.cos(i2);
				var s2 = Math.sin(i2);
				if (s == null) {
					s = "M" + (s1 * r1).toFixed(precision) + "," + (c1 * r1).toFixed(precision) + " ";
				} else {
					s += "L" + (s1 * r1).toFixed(precision) + "," + (c1 * r1).toFixed(precision) + " ";
				}
				s += "L" + (s2 * r2).toFixed(precision) + "," + (c2 * r2).toFixed(precision) + " ";
			}
			s += "z";
			return s;
		}

	});
</script>

</head>
<body class="tundra">
</head>

<div id="map" dojoType="dojox.geo.openlayers.widget.Map" baseLayerType="ArcGIS"
	initialLocation="{
    position : [7.154126, 43.651748],
    extent : 0.002 }"
	style="background-color: #b5d0d0; width: 100%; height: 100%;"></div>

</body>
</html>
